<template>
	<div class="commodityDetail">
		<header class="clear">
			<div class="navbar clear">
				<a @click="scrollA" :class="{'active1': isA, 'active2': isB}" class="fl"><div class="nav-item">商品</div></a>
				<a @click="scrollB" :class="{'active1': isB, 'active2': isA}" class="fr"><div class="nav-item">详情</div></a>
			</div>
			<router-link to="personalCenter" class="share-icon"><img src="../assets/image/ico_personal@2x@2x.png"/></router-link>
			<router-link to="index" class="shoppingcart-icon"><img src="../assets/image/ico_home@2x@2x.png"/></router-link>
		</header>
		<div class="commoditybar" id="commoditybar">
			<div class="swipebar">
				<mt-swipe :auto="0">
					<mt-swipe-item v-for="item in productContent.banner" :key="item.img"><img :src="item" class="swipe-img"/></mt-swipe-item>
				</mt-swipe>
				<!--<div class="sales-activity hidden">-->
					<!--<span class="fl">抢购中</span>-->
					<!--<span class="fr">距结束仅剩 11天12小时12分钟</span>-->
				<!--</div>-->
			</div>
			<p class="product-name">{{productContent.goodsName}}</p>
			<p class="product-tips">{{productContent.subName}}</p>
			<div class="product-price clear"><span class="shop-price fl"><i>¥</i>{{productContent.shopPrice}}</span>
			  <!--<span class="market-price fl">¥</span><span class="sales fl"></span>-->
			</div>
			<div class="service clear">
				<span class="fl clear" v-if="productContent.isOnline == 0"><img src="../assets/image/tick@2x.png" class="fl"/><p class="fl">门店自提</p></span>
				<span class="fl clear"><img src="../assets/image/tick@2x.png" class="fl"/><p class="fl">正品保障</p></span>
				<span class="fl clear"><img src="../assets/image/tick@2x.png" class="fl"/><p class="fl">全场包邮</p></span>
			</div>
      <div class="select-wrap">
        <div class="activity clear" v-if="productContent.subjectID != null || undefined || ''">
          <p class="item-text fl"><i class="item-title">活动：&nbsp;</i>{{productContent.subjectName}}</p>
          <router-link to="" class="fr"><img src="../assets/image/ico_leave-for@2x.png" class="item-icon"/></router-link>
        </div>
        <div class="selected clear" @click='popupToggle("selectType")' v-if="colorList.length != 0 && sizeList.length != 0">
          <p class="item-text fl" v-if="color || size"><i class="item-title">已选择：&nbsp;</i>{{color}}&nbsp; {{color ? ';' : ''}}&nbsp;&nbsp; {{size}} {{size ? ';' : ''}}&nbsp;{{(color && size) ? selectedNum : ''}}</p>
          <p class="item-text fl" v-if="!color && !size"><i class="item-title">选择 颜色分类 尺码&nbsp;</i></p>
          <a class="fr"><img src="../assets/image/ico_leave-for@2x.png" class="item-icon"/></a>
        </div>
      </div>
			<div class="evaluate">
				<div class="evaluate-title clear">
					<p class="evaluate-num fl">买家评价( {{commentCon.count}} )</p>
					<router-link :to="{path:'commentList', query:{sku: productContent.sku}}" class="fr"><img src="../assets/image/ico_leave-for@2x.png" class="evaluate-icon"/></router-link>
					<p class="noComment fr" v-if="commentCon.count == '0'">暂时还没有评价哦！</p>
				</div>
				<div class="evaluate-content clear" v-if="commentCon.count != 0">
					<img :src="commentCon.headerUrl" class="head-img fl"/>
					<div class="evaluate-msg fl">
						<p class="evaluate-name">{{commentCon.nickname}}</p>
						<p class="evaluate-container">{{commentCon.comment}}</p>
						<p class="evaluate-size">颜色:&nbsp; 尺码：</p>
					</div>
				</div>
			</div>
			<div class="store-bar">
				<div class="fl store-msg">
					<p class="store-name clear"><img src="../assets/image/ico_Shop@2x.png" class="fl"/><span class="fl">{{storeInfo.storeName}}</span></p>
          <router-link :to="{path: 'map', params: {lat: storeInfo.latitude, lng: storeInfo.longitude, address: storeInfo.address, storeName: storeInfo.storeName, cusPhone: storeInfo.cusPhone}} "><p class="store-add clear"><img src="../assets/image/ico_location_store@2x.png" class="fl"/><span class="fl">{{storeInfo.address}}</span></p></router-link>
				</div>
				<router-link :to="{path: 'map', params: {lat: storeInfo.latitude, lng: storeInfo.longitude, address: storeInfo.address, storeName: storeInfo.storeName, cusPhone: storeInfo.cusPhone}} " class="to-store-a fr"><img src="../assets/image/ico_leave-for@2x.png" class="to-store"/></router-link>
			</div>
			<div class="details-header clear"><span class="fl"></span><p class="fl">商品详情</p><span class="fl"></span></div>
			<table class="parameter">
				<tr v-for="item in productContent.attrs">
					<td>{{item.attributeKey}}</td>
					<td>{{item.attributeValue}}</td>
				</tr>
			</table>
      <div class="details-content" id="details-content" v-html="productContent.desc"></div>
		</div>
		<footer class="clear">
			<router-link :to='{path: "recommendStore", query: {storeID: storeInfo.storeID}}' class="small-icon fl"><button type="button" class=""><img src="../assets/image/ico_Shop2@2x.png"/><p>店铺</p></button></router-link>
			<a class="small-icon fl" v-if="productContent.status != 'Offline'"><button type="button" class="fl" @click="changeCollect()"><img src="../assets/image/collect@2x.png" v-if="followFlag == false"/><img src="../assets/image/collect_pre@2x.png" v-if="followFlag == true"/><p>收藏</p></button></a>
			<router-link :to='{path: "shopCar"}' class="small-icon fl" v-if="productContent.status != 'Offline'"><button type="button" class="fl collection"><img src="../assets/image/shoppingcart@2x.png"/><p>购物车</p></button></router-link>
			<a class="large_button fl" v-if="productContent.status == 'Online' && stock != 0"><button type="button" class="large-icon fr add-shoppingcart" @click='popupToggle("addCart")'>加入购物车</button></a>
			<a class="large_button fl" v-if="productContent.status == 'Online' && stock != 0"><button type="button" class="large-icon fr buy-now" @click='popupToggle("buyNow")'>立即购买</button></a>
			<a class="fl" v-if="productContent.status == 'Offline'"><button type="button" disabled="disabled" class="already-laid fr hidden">已下架</button></a>
			<a class="arrival-notice fl" @click="stockMsgFlag = true" v-if="stock == 0"><button type="button" class=" hidden">到货通知</button></a>
		</footer>
		<!--到货通知弹窗-->
		<div class="popup-bg " v-show="stockMsgFlag">
			<div class="popup-notice">
				<p class="popup-title">到货通知</p>
				<p class="popup-tips">请留下您的手机号码，商品到货时，小搭会第一时间通知您！</p>
				<div class="phonenumber"><input class="phoneNum" type="text" v-model="mobileNum" maxlength="11"/><a class="quick-delete" @click="mobileNum = ''"><img src="../assets/image/close_phone@2x.png"/></a></div>
				<div class="buttonbar clear">
					<button class="fl" @click="stockMsgFlag = false">取消</button>
					<button class="fl commit" @click="commitTips">确定</button>
				</div>
			</div>
		</div>
		<!--选择尺码弹窗-->
		<div class="popup-bg" v-show="popupFlag">
			<div class="popup-content">
				<div class="popup-head clear">
					<img :src="productContent.banner ? productContent.banner[0] : ''" class="product-img fl"/>
					<div class="product-msg fl">
						<p class="pro-price"><i>￥</i>{{productContent.shopPrice}} </p>
						<p class="inventory">库存{{nowStock ? nowStock : stock}}件</p>
						<p class="size" v-if="color && !size">选择 尺码</p>
						<p class="size" v-if="size && !color">选择 颜色分类</p>
						<p class="size" v-if="size && color">已选择：{{color}}; {{size}}{{size == '均码' ? '' : "码"}}</p>
						<p class="size" v-if="!size && !color">选择 颜色分类 尺码</p>
					</div>
					<img src="../assets/image/close_shop@2x.png" class="fr close-img" @click="closePopup()"/>
				</div>
				<div class="selectbar" v-if="colorList.length > 0">
					<p>颜色分类</p>
					<div class="clear">
						<label v-for="(item,index) in colorList" :class="{select : (colorType == index),disabled : (stockListColor[index] ==0 || stock == 0)}" class="fl">
							{{colorList[index]}}
							<input type="radio" :value="item" v-model="color" v-if="stockListColor[index] != 0" @change="colorToggle(index, stockListColor[index],skuListColor[index]);">
						</label>
					</div>
				</div>
				<div class="selectbar" v-if="sizeList.length > 0">
					<p>尺码</p>
					<div class="clear">
						<label v-for="(item,index) in sizeList" :class="{select : (sizeType == index),disabled : (stockListSize[index] ==0 || stock == 0)}" class="fl">
							{{sizeList[index]}}
							<input type="radio" :value="item" v-model="size" v-if="stockListSize[index] != 0" @change="sizeToggle(index, stockListSize[index],skuListSize[index]);">
						</label>
					</div>
				</div>
				<div class="selectbar">
					<p>购买数量</p>
					<div class="num-change clear fr">
						<span class="mins fl" @click="changeNum(-1)" :class="{disabledNum : (proNum == 1)}">-</span>
						<span class="num fl"><input type="text" :value="proNum" v-model="proNum" @blur="numberLimit"></span>
						<span class="plus fl" @click="changeNum(1)" :class="{disabledNum : (proNum >= (nowStock ? nowStock : stock))}">+</span>
					</div>
				</div>
				<button class="sumit-btn gradient" @click="sumit()">确定</button>
			</div>
		</div>
    <login></login>
	</div>
</template>
<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'
import login from './login'
import store from '../assets/js/store.js'

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

export default {
	data () {
		return {
			spu:'',
			lng:lng,
			lat:lat,
			token:'',
			productContent:{},
			stock: 0,
			commentCon:[],
			storeInfo:[],
			colorType:null,
			sizeType:null,
			popupFlag:false,
			wayFrom:'',
			proNum:1,
			selectedNum:1,
			color: '',
			size:'',
			colorList:[],
			sizeList:[],
			stockListColor:[],
			stockListSize:[],
			skuListColor:[],
			skuListSize:[],
			nowStock: 0,
			nowSku:'',
			goodsMsg:null,
			followFlag:null,
			stockMsgFlag:false,
			comfirmOrderMsg:[],
			mobileNum:'',
			isA: true,
			isB: false
		}
	},
	created(){
		this.$store.commit('upIntegral', {integral: false});
		this.spu=this.$route.query.spu;
	},
	watch : {
      mobileNum () {
        this.mobileNum = this.mobileNum.replace(/[^\d]/g, '');
      }
    },
	name: 'app',
	components: {
		login
	},
	mounted:function () {
		this.$nextTick(function () {
			this.cartView();
			this.fetch();
		});
	},
	watch:{
		proNum:function () {
			if(this.proNum>(this.nowStock ? this.nowStock : this.stock)){
				this.proNum = this.nowStock ? this.nowStock : this.stock;
				alert("库存不足")
			}
		}
	},
	methods:{
		numberLimit:function () {
			if(this.proNum <=1 || '' || null || undefined){
				this.proNum = 1
			}
		},
		cartView:function () {
			var _this = this;
			this.$http.post(Util.ajaxPath.devProductUrl+'shop-mms/mms/goods/details',{longitude:this.lng,latitude:this.lat,spu:_this.spu},{emulateJSON : true}).then(function (res) {
				_this.productContent = res.body.content;
				_this.stock = _this.productContent.stock;
				_this.colorList = _this.productContent.colors;
				_this.sizeList = _this.productContent.sizes;
				_this.commentCon = _this.productContent.comment;
				_this.storeInfo =  _this.productContent.storeInfo;
				_this.followFlag = _this.productContent.isfollow;
				res.body.content.desc = res.body.content.desc.replace(/\<br\>/g,'');
			});
		},
		fetch:function () {
			this.token = (window.localStorage.getItem("token") || '');
		},
		scrollA () {
			document.body.scrollTop = document.querySelector(".swipebar").offsetTop;
			this.isA = true;
			this.isB = false;
		},
		scrollB () {
			document.body.scrollTop = document.querySelector(".details-header").offsetTop;
			this.isA = false;
			this.isB = true;
		},
		colorToggle:function (colorType, stock,sku) {
			if(stock == 0) return;
			this.nowStock = stock;
			this.nowSku = sku;
			this.colorType=colorType;
			this.changeCon = this.colorList[colorType];
			this.selectFlag = true;
			var _this = this;

			this.$http.post(Util.ajaxPath.devProductUrl+'shop-mms/mms/goods/colorAndSize',{storeID:_this.storeInfo.storeID,spu:_this.spu,color:_this.changeCon},{emulateJSON : true}).then(function (res) {
				_this.sizeList = [];
				_this.stockListSize = [];
				_this.skuListSize = [];
				for(var i=0; i<res.body.content.length; i++){
					_this.sizeList.push(res.body.content[i].size);
					_this.stockListSize.push(res.body.content[i].stock);
					_this.skuListSize.push(res.body.content[i].sku);
				}
			});
		},

		sizeToggle:function (sizeType, stock,sku) {
			if(stock == 0) return;
			this.nowStock = stock;
			this.sizeType=sizeType;
			this.nowSku = sku;
			this.changeCon = this.sizeList[sizeType];
			this.selectFlag = true;
			var _this = this;

			this.$http.post(Util.ajaxPath.devProductUrl+'shop-mms/mms/goods/colorAndSize',{storeID:_this.storeInfo.storeID,spu:_this.spu,size:_this.changeCon},{emulateJSON : true}).then(function (res) {
				_this.colorList = [];
				_this.stockListColor = [];
				_this.skuListColor = [];
				for(var i=0; i<res.body.content.length; i++){
					_this.colorList.push(res.body.content[i].color);
					_this.stockListColor.push(res.body.content[i].stock);
					_this.skuListColor.push(res.body.content[i].sku);
				}
			});
		},

		popupToggle:function (way) {
			var _this = this;
			if(_this.colorList.length == 0 && _this.sizeList.length == 0){
				_this.goodsMsg = '[{"spu":"'+_this.spu+'","storeId":"'+ _this.storeInfo.storeID +'","sku":"'+ _this.productContent.sku +'","storeSku":"'+ _this.productContent.storeSku +'","itemColor":"'+ _this.productContent.color +'","itemSize":"'+ _this.productContent.size +'","itemName":"'+ _this.productContent.goodsName +'","itemNum":"1","itemPrice":"'+ _this.productContent.shopPrice +'","itemPriceNow":"'+ _this.productContent.shopPrice +'","itemDiscount":"0"}]';
				if(way == 'buyNow'){
					localStorage.removeItem("shopCarMsg");
					_this.comfirmOrderMsg = [{"spu":_this.spu,"storeId":_this.storeInfo.storeID,"storeName":_this.storeInfo.storeName,"storePhoneNum":_this.storeInfo.cusPhone,"address":_this.storeInfo.address,"sku":_this.productContent.sku,"storeSku":_this.productContent.storeSku,"itemName":_this.productContent.goodsName,"itemNum":1,"itemPrice":_this.productContent.shopPrice,"itemPriceNow":_this.productContent.shopPrice,"itemDiscount":"0","itemColor":_this.productContent.color,"itemSize":_this.productContent.size,"imageUrl":_this.productContent.banner[0],"isOnline":_this.productContent.isOnline}];
					localStorage.setItem("shopCarMsg",JSON.stringify(_this.comfirmOrderMsg));
					_this.$router.push({
						path: 'confirmOrder',
						query: {
							from: "commodityDetail"
						}
					})
				}else if(way == 'addCart'){
					_this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/addShoppingCart',{token:window.localStorage.getItem("token"),shoppingmsg:_this.goodsMsg},{emulateJSON : true}).then(function (res) {
						_this.statusMsg = res.body.content.statusMsg;
						this.$store.commit('upLoginOpen', { isOpen : true, integral: false});
					});
				}
			}else {
				this.popupFlag=true;
				this.wayFrom=way;
			}
		},

		changeNum:function (num) {
			let nowStock = this.nowStock ? this.nowStock : this.stock;
			if(num>0){
				if(nowStock <= this.proNum) return;
				this.proNum++;
			}else {
				this.proNum--;
				if(this.proNum<1){
					this.proNum = 1;
				}
			  }
			  this.selectedNum=this.proNum;
			},

			sumit:function () {
        var _this = this;
        if(_this.color && _this.size ){
          _this.goodsMsg = '[{"spu":"'+_this.spu+'","storeId":"'+ _this.storeInfo.storeID +'","sku":"'+ _this.nowSku +'","storeSku":"'+ _this.productContent.storeSku +'","itemColor":"'+ _this.color +'","itemSize":"'+ _this.size +'","itemName":"'+ _this.productContent.goodsName +'","itemNum":"'+ _this.proNum+'","itemPrice":"'+ _this.productContent.shopPrice +'","itemPriceNow":"'+ _this.productContent.shopPrice +'","itemDiscount":"0"}]';
          if(_this.wayFrom == 'buyNow'){
            localStorage.removeItem("shopCarMsg");
            _this.comfirmOrderMsg = [{"spu":_this.spu,"storeId":_this.storeInfo.storeID,"storeName":_this.storeInfo.storeName,"storePhoneNum":_this.storeInfo.cusPhone,"address":_this.storeInfo.address,"sku":_this.nowSku,"storeSku":_this.productContent.storeSku,"itemName":_this.productContent.goodsName,"itemNum":_this.proNum,"itemPrice":_this.productContent.shopPrice,"itemPriceNow":_this.productContent.shopPrice,"itemDiscount":"0","itemColor":_this.color,"itemSize":_this.size,"imageUrl":_this.productContent.banner[0],"isOnline":_this.productContent.isOnline}];
            localStorage.setItem("shopCarMsg",JSON.stringify(_this.comfirmOrderMsg));
            _this.$router.push({
              path: 'confirmOrder',
              query: {
                from: "commodityDetail"
              }
            })
          }else if(_this.wayFrom == 'addCart'){
            _this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/addShoppingCart',{token:window.localStorage.getItem("token"),shoppingmsg:_this.goodsMsg},{emulateJSON : true}).then(function (res) {
              if(res.body.code == 10009){
                this.$store.commit('upLoginOpen', { isOpen : true, integral: false});
              }else if(res.body.code == 13000) {
                alert(res.body.content.statusMsg)
              }
            });
          }
          this.popupFlag=false;
        }else if(_this.size && !_this.color){
            alert("请选择颜色分类")
        }else if(!_this.size && _this.color){
          alert("请选择尺寸")
        }else {
          alert("请选择颜色分类 尺寸")
        }

			},
      changeCollect:function () {
        var _this = this;
            if(this.followFlag == true){
              _this.$http.post(Util.ajaxPath.devProductUrl+'shop-mms/mms/me/unGoodsFollow',{sku:_this.productContent.sku,token:window.localStorage.getItem("token")},{emulateJSON : true}).then(function (res) {
                if(res.body.code == 15000){
                  _this.followFlag = false;
                  alert("取消收藏成功！")
                }else if(res.body.code == 10009){
                  _this.followFlag = false;
                  alert(res.body.content.statusMsg);
                  _this.$store.commit('upLoginOpen', { isOpen : true});
                }
              });
            }else{
              _this.$http.post(Util.ajaxPath.devProductUrl+'shop-mms/mms/me/addGoodsFollow',{sku:_this.productContent.sku,token:window.localStorage.getItem("token")},{emulateJSON : true}).then(function (res) {
                if(res.body.code == 15000){
                  _this.followFlag = true;
                  alert("收藏成功！")
                }else if(res.body.code == 15001){
                  _this.followFlag = true;
                  alert("收藏成功！")
                }else if(res.body.code == 15002){
                  _this.followFlag = false;
                  alert("收藏失败！")
                }else if(res.body.code == 10009){
                  _this.followFlag = false;
                  alert(res.body.content.statusMsg);
                  _this.$store.commit('upLoginOpen', { isOpen : true});
                }
              });
            }
      },
			closePopup:function () {
			  this.popupFlag=false;
			},
      commitTips:function () {
        if(this.mobileNum != ''|| null || undefined){
          const phoneReg = /^1[3|4|5|7|8]{1}\d{9}/;
          const type = 'register';
          if(!phoneReg.test(this.mobileNum)) {
            alert("请输入正确手机号码");
            return;
          }else {
            this.stockMsgFlag = false;
          }
        }else {
          alert("请输入手机号码");
        }
      }
	}
}
</script>
<style lang="scss">
.commodityDetail{
	background: #fff;
	header{
		width: 100%; height: 0.86rem; position:fixed; top:0; left: 0; z-index: 1000; background:#fff; border-bottom:0.02rem solid #ddd;
		.back-icon{ width: 0.44rem; height: 0.44rem; margin: 0.22rem 0 0.22rem 0.34rem;}
		.navbar{
			width:2.02rem; height:0.86rem; margin:0 auto; background:#fff;
			a{ display: block; height: 0.84rem;}
			.nav-item{
				width: 0.68rem; height: 0.84rem; font-size: 0.3rem; line-height:0.84rem; text-align: center; color: #999;
			}
			.active1{
				border-bottom: 0.04rem solid #151517;
				.nav-item{ color:#151517;}
			}
			.active2{
				border-bottom: 0;
				.nav-item{ color:#999;}
			}
		}
		.share-icon{
			display: block; width: 0.44rem; height: 0.44rem; position:absolute; right:0.34rem; top:0.22rem;
			img{ display: block; width: 0.44rem; height: 0.44rem;}
		}
		.shoppingcart-icon{
			display: block; width: 0.44rem; height: 0.44rem; position:absolute; right:1.14rem; top:0.22rem;
			img{display: block; width: 0.44rem; height: 0.44rem;}
		}
	}
	.commoditybar{
		padding-bottom: 1.01rem; background: #fff; position: absolute; left: 0; top: 0.88rem;
	}
	.mint-swipe .mint-swipe-items-wrap{height: 7.5rem;}
	.swipe-img{display: block; width: 7.5rem; height: 7.5rem;}
	.mint-swipe-indicator{width: 0.1rem; height: 0.1rem; background: #999;}
	.mint-swipe-indicators .is-active{width:0.16rem; height:0.1rem; background: #333; }
	.sales-activity{
		width: calc(100%-0.6rem); height: 0.6rem; padding: 0 0.3rem; background: #fe4a6b;
		span{font-size: 0.28rem; line-height:0.6rem; color: #fff;}
	}
	.product-name{margin: 0.44rem 0.3rem 0.19rem 0.3rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; font-size: 0.3rem; text-align: left; line-height:0.37rem; color: #151517;}
	.product-tips{margin-left: 0.3rem; height:0.2rem; font-size: 0.2rem; line-height: 0.2rem; text-align: left; color: #666;}
	.product-price{
		height:0.4rem; margin:0.3rem 0 0.3rem 0.3rem;
		.shop-price{
			height: 0.4rem; font-size: 0.4rem; line-height: 0.4rem; color: #ff365d;
			i{ padding-top:0.16rem; height:0.24rem; font-size: 0.24rem; line-height: 0.24rem; color: #ff365d;}
		}
		.market-price{padding: 0.08rem 0.14rem 0.08rem 0.1rem; height:0.24rem; font-size: 0.24rem; text-decoration: line-through; line-height: 0.24rem; color: #a8a8a8;}
		.sales{ margin: 0.06rem 0; width: 0.52rem; height: 0.28rem; font-size: 0.2rem; line-height: 0.28rem; text-align: center; background: #fe4a6b; color: #fff;}
	}
	.service{
		width:calc(100%-0.58rem); height: 0.6rem; padding: 0 0.29rem; background:#f4f5f5;
		span{
			display: block;
			img{ display: block; width: 0.2rem; height: 0.2rem; padding: 0.2rem 0.1rem 0.2rem 0;}
			p{ font-size: 0.2rem; line-height: 0.6rem; color: #999;}
			+span{ margin-left: 0.68rem;}
		}
	}
	.activity{ border-bottom: 1px solid #f1f1f1;}
	.activity,.selected{
		width: calc(100%-0.6rem); height: 0.8rem; padding: 0 0.3rem;
		a{ display: block; height:0.3rem; margin: 0.25rem 0;}
		.item-text{
			font-size: 0.24rem; line-height: 0.8rem; color: #333;
			.item-title{font-size: 0.24rem; line-height: 0.8rem; color: #333;}
		}
		.item-icon{ display: block; width:0.3rem; height: 0.3rem;}
	}
  .select-wrap{border-bottom: 0.2rem solid #f4f5f5;}
	.evaluate{
		 background: #fff; padding: 0 0.3rem;
		.evaluate-title{
			height:0.88rem; width: 100%; border-bottom:1px solid #f1f1f1;
			a{ display: block; height:0.3rem; margin: 0.29rem 0;}
			.evaluate-num{ font-size: 0.28rem; text-align: left; line-height: 0.88rem; color: #151517;}
			.evaluate-icon{ display: block; width:0.3rem; height: 0.3rem;}
			.noComment{font-size: 0.28rem; color: #999; line-height: 0.88rem; padding-right: 0.29rem;}
		}
		.evaluate-content{
			width: 100%; height: 1.62rem; border-bottom: 1px solid #f1f1f1; background: #fff;
			.head-img{ width: 0.82rem; height: 0.82rem; padding: 0.4rem 0.2rem 0.4rem 0; border-radius: 50%;}
			.evaluate-msg{
				width: 5.88rem;
				.evaluate-name{width: 5.88rem; padding: 0.27rem 0 0.2rem 0; height: 0.26rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; font-size: 0.26rem; line-height: 0.26rem; color: #2e2e2e;}
				.evaluate-container{width: 5.88rem; padding-bottom: 0.14rem; height: 0.24rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; font-size: 0.24rem; line-height: 0.24rem; color: #2e2e2e;}
				.evaluate-size{width: 5.88rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; font-size: 0.2rem; line-height: 0.22rem; color: #a8a8a8;}
			}
		}
	}
	.store-bar{width: calc(100%-0.6rem); height: 1.3rem; padding: 0 0.3rem; background: #fff;}
	.store-msg{
		width: 6.6rem;
	.store-name{
		width: 100%; height: 0.28rem; padding: 0.3rem 0 0.22rem 0;
		img{display: block; width: 0.28rem; height: 0.28rem;}
		span{display:block; width: 6.1rem; height: 0.28rem; font-size: 0.28rem; line-height: 0.28rem; text-indent:0.22rem; color: #151517; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
	}
	.store-add{
		width: 100%; height: 0.22rem;
		img{display: block; width: auto; height: 0.22rem;}
		span{display:block; width: 6.1rem; height: 0.22rem; font-size: 0.22rem; line-height: 0.22rem; text-indent:0.14rem; color: #999; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
	}
	}
	.to-store-a{ display: block; height: 0.3rem; margin:0.5rem 0;}
	.to-store{ display: block; width: 0.3rem; height: 0.3rem;}
	footer{
		width:100%; height:1rem; position: fixed; left: 0; bottom: 0;
		a{display: block; height: 1rem;}
    .large_button{ width: 27%;}
		button{display: block; width: 100%; height: 1rem;}
			.small-icon{
        width:calc((46% - 2px)/3); background:#fff;  border-top: 1px solid #e8e8e8;
				+.small-icon{ border-left: 1px solid #f1f1f1;}
				 img{ width: 0.4rem; height: 0.4rem; margin: 0 auto 0.12rem;}
				 p{ width: 100%; font-size: 0.2rem; line-height: 0.2rem; color: #333; text-align: center;}
			}

			.large-icon{
       width:100%; height: 1rem; font-size: 0.32rem; line-height: 0.28rem; text-align: center; color: #fff; background: #ff4c55;}
			.add-shoppingcart{ background: #333;}
			.buy-now{background: #ff365d;}
			.arrival-notice{
         width: 54%;
        button{display: block; width: 100%; height: 1rem; border: 0; font-size: 0.28rem; line-height: 0.28rem; text-align: center; color: #fff; background: #FF4C55;}
      }
			.already-laid{display: block; width:5.28rem; height: 1rem; border: 0; font-size: 0.32rem; text-align: center; line-height: 1rem; color: #fff; background: #999;}
	}
	.details-header{
		width:5.84rem; height: 0.26rem; margin: 0 auto; padding: 0.6rem 0 0.4rem;
		p{ padding: 0 0.2rem; font-size: 0.26rem; line-height: 0.26rem; color: #333;}
		span{display: block; width: 2.2rem; height: 0.02rem; margin:0.12rem 0;  background: #f1f1f1; }
	}
	.parameter{
		width:calc(100%-0.6rem); margin:0 auto;
		td{width: 3.44rem; height: 0.58rem; border: 1px solid #ddd; font-size: 0.24rem; line-height: 0.58rem; text-align: center; color: #333;}
	}
	.details-content{
    padding-top: 0.5rem; width: 100%;
    img{width: 100%;}
  }
	.popup-bg{width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: fixed; left: 0; top: 0; z-index: 20;}
	.popup-notice{
		margin: 3rem auto 0; width: 6rem; height: 6.64rem; background: url(../assets/image/arrival@2x.png)no-repeat; background-size: 6rem 6.64rem;
		.popup-title{width:100%; height: 0.32rem; padding-top: 2.7rem; font-size: 0.32rem; line-height: 0.32rem; text-align: center; color:#333;}
		.popup-tips{width: 4.84rem; margin: 0.32rem 0.58rem 0.26rem 0.58rem; font-size: 0.26rem; line-height: 0.38rem; color: #666;}
		.phonenumber{
			position:relative;
		input{display: block; width: 3.5rem; margin: 0 0.8rem; padding: 0 0.6rem 0 0.3rem; height: 0.66rem; border: 0; background: #f1f1f1; font-size: 0.26rem; line-height: 0.66rem; color: #333;}
		.quick-delete{
			display:block; width:0.4rem; height:0.4rem; position:absolute; right:1rem; top:0.13rem;
			img{display: block; width: 0.4rem; height: 0.4rem;}
			}
		}
		.buttonbar{
			width: 5.34rem; height: 0.9rem; margin: 0.7rem 0.33rem 0 0.33rem; border-top: 1px solid #ddd;
		button{
			display:block; width:2.66rem; height:0.9rem; border: 0; font-size:0.28rem; line-height:0.9rem; text-align:center; color:#666; background:#fff;
			+button{border-left: 0.02rem solid #ddd;}
		}
		.commit{ color: #ff365d;}
		}
	}
	.popup-content {
		width: 100%; position: fixed; left: 0; bottom: 0; background: #fff;
		.popup-head{
			margin: 0 0.3rem; width:6.9rem; height: 2.26rem;
			.product-img{ display: block; width: 2.6rem; height: 2.6rem; margin-top: -0.94rem;}
			.product-msg{
				padding:0.3rem 0 0 0.3rem;
				.pro-price{
					height:0.32rem; padding-bottom: 0.29rem; font-size: 0.32rem; font-weight: bold; line-height: 0.32rem; color: #ff365d;
					i{ height: 0.28rem; padding-top: 0.04rem; font-size: 0.28rem; line-height: 0.28rem; color:#ff365d;}
				}
				.inventory{ height: 0.28rem; font-size: 0.28rem; line-height: 0.28rem; color: #333;}
				.size{ height:0.28rem; padding-top: 0.18rem; font-size: 0.28rem; line-height: 0.28rem; color: #333;}
			}
			.close-img{display: block; width: 0.6rem; height: 0.6rem; padding: 0.1rem 0.2rem 0 0;}
		}
		.selectbar{
			margin: 0 0.3rem; border-top:1px solid #ddd;
			p{ height:0.28rem; margin: 0.3rem 0; font-size: 0.28rem; line-height: 0.28rem; color: #333;}
			.clear{ height: 1.2rem;}
			label{
				display:block; width: 1.16rem; height: 0.56rem; border:0.02rem solid #aaa; border-radius: 0.08rem; font-size: 0.24rem; line-height: 0.56rem; text-align: center; color: #333;
				+label{ margin-left: 0.22rem;}
			}
			input{display:none;}
			.select{ border:0.02rem solid #ff365d; background: #ff365d; color: #fff;}
			.disabled{ border:0.02rem solid #f1f1f1; background: #f1f1f1; color: #b2b2b2;}
			.num-change{
				height:0.6rem; margin-bottom: 0.3rem; border:1px solid #ddd;
				span{
					display:block; font-size: 0.28rem; text-align: center; line-height: 0.6rem; color: #333;
					+span{border-left:1px solid #ddd;}
				}

			.mins,.plus{width: 0.5rem; height: 0.6rem;}
			.disabledNum{ background: #e9e9e9;}
			.num{
        width:0.8rem; height: 0.6rem;
        input{display: block; width: 0.8rem; height: 0.6rem; font-size: 0.28rem; text-align: center; line-height: 0.6rem; color: #333; background: #fff;}
      }
			}
		}
	}
	.sumit-btn{display:block; width: 100%; height: 0.88rem; border: 0; font-size: 0.3rem; text-align: center; line-height: 0.88rem; color: #fff;}
	.gradient{width:100%; height:0.88rem; background: linear-gradient(to right,#fe4a6b,#e8163f);
	}
}
</style>
